<template>
  <div class="form-gener">
    <div class="form-gener-left" :class="toLeft?'form-gener-side-close':''">
      <div class="form-gener-left-title">组件库</div>
      <!-- 左侧组件 -->
      <FormGeneratorCom
        class="form-gener-left-cont"
        :formConf="formAttrData"
        @add="handleAdd"
        @drag="handleDrag"
      />
    </div>
    <div class="form-gener-content">
      <div class="form-gener-button">
        <div>
          <el-button type="text" icon="el-icon-view" @click="handleView">预览</el-button>
          <!-- <el-button type="text" icon="el-icon-view" @click="handleViewPhone">预览(移动端)</el-button> -->
        </div>
        <div>
          <el-button
            v-if="!hideSaveBtn"
            type="text"
            icon="el-icon-folder-checked"
            @click="handleSave"
          >保存</el-button>
          <el-button
            type="text"
            style="color: #f56c6c;"
            icon="el-icon-delete"
            class="danger"
            @click="handleClear"
          >清空</el-button>
        </div>
      </div>
      <!-- 中间表单内容 -->
      <el-form
        class="form-gener-form"
        :ref="formAttrData.formRef"
        :size="formAttrData.size"
        :label-position="formAttrData.labelPosition"
        :disabled="formAttrData.disabled"
        :label-width="formAttrData.labelWidth + 'px'"
      >
        <form-row-container
          :enabled="enabled"
          :list.sync="drawingList"
          :formConf="formAttrData"
          :currentData.sync="activeConfig"
          height="100%"
          @clone="handleClone"
        />
        <el-empty class="form-empty" v-show="!drawingList.length" description="从左侧拖入或点选组件进行表单设计"></el-empty>
      </el-form>
      <i class="el-icon-arrow-left toLeft" @click="toLeft=!toLeft" />
      <i class="el-icon-arrow-right toRight" @click="toRight=!toRight" />
    </div>
    <div class="form-gener-right" :class="toRight?'form-gener-side-close':''">
      <!-- 右侧表单属性 -->
      <el-tabs v-model="currentTab" stretch>
        <el-tab-pane label="组件属性" name="field" />
        <el-tab-pane label="表单属性" name="form" />
      </el-tabs>
      <div class="form-gener-attr-cont">
        <FormGeneratorAttrField v-show="currentTab == 'field'" :fieldConf.sync="activeConfig" />
        <FormGeneratorAttrForm v-show="currentTab == 'form'" :formConf.sync="formAttrData" />
      </div>
    </div>
    <FormPreview ref="FormPreview" />
  </div>
</template>

<script>
import FormGeneratorCom from "./components/formGeneratorCom.vue";
import FormGeneratorAttrField from "./components/formGeneratorAttrField.vue";
import FormGeneratorAttrForm from "./components/formGeneratorAttrForm.vue";
import FormPreview from "./components/formPreview.vue";

import { formConf } from "./utils/config";
import { Message, MessageBox } from "element-ui";
import { deepClone, validateForm } from "./utils";
export default {
  components: {
    FormGeneratorCom,
    FormGeneratorAttrField,
    FormGeneratorAttrForm,
    FormPreview
  },

  props: {
    // 用于回显的旧数据表单列表
    formLists: {
      type: Array,
      default: () => []
    },
    // 用于回显的旧数据表单属性
    formAttrs: {
      type: Object,
      default: () => {}
    },
    // 隐藏保存按钮
    hideSaveBtn: {
      type: Boolean,
      default: false
    },
    // 编辑器时是否可以点击操作
    enabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      drawingList: this.formLists, // 初始化时默认选中表单组件
      activeConfig: this.formLists[0], // 当前选中的表单控件
      formAttrData: { ...formConf, ...this.formAttrs }, // 当前的表单属性
      currentTab: "field", // field 组件属性 form 表单属性
      toLeft: false,
      toRight: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 给初始值表单设置表单项id formId
      this.activeConfig = this.drawingList[0] || {};
    },
    handleLeft() {
      console.log("handleLeft");
    },
    // 校验
    validate(cb) {
      // 1. 不允许为空
      if (!this.drawingList.length) {
        cb(false, ["表单为空，请添加组件"]);
        return;
      }
      // 2. 表单名称不能为空
      const obj = validateForm(this.drawingList);
      cb(obj.valid, obj.errorMsg);
    },

    // 从左侧控件点击某一控件添加表单项
    handleAdd(item) {
      this.drawingList.push(item);
      this.activeConfig = item;
    },
    // 从左侧控件拖拽某一控件添加表单项，拖拽会自动添加，无须手动添加表单项，只需要更新当前选中表单项
    handleDrag(item) {
      this.activeConfig = deepClone(item);
    },
    // 清空表单
    handleClear() {
      MessageBox.confirm("确定要清空所有组件吗？", {
        type: "warning"
      }).then(() => {
        this.drawingList = [];
      });
    },
    // 预览表单
    handleView() {
      if (!this.drawingList.length) {
        return Message.error("请选择表单组件！");
      }
      this.$refs.FormPreview.open(this.drawingList, this.formAttrData);
    },
    // 预览表单(移动端)
    handleViewPhone() {
      if (!this.drawingList.length) {
        return Message.error("请选择表单组件！");
      }
      this.$refs.FormPhoneDialog.open(this.drawingList, this.formAttrData);
    },
    handleClone(clone) {
      this.drawingList.push(clone);
    },
    // 保存
    handleSave() {
      if (!this.drawingList.length) {
        return Message.error("请选择表单组件！");
      }
      MessageBox.confirm("确定保存该表单吗？", {
        type: "warning"
      }).then(() => {
        // Message.success("保存成功！");
        const list = deepClone(this.drawingList);
        const attrs = deepClone(this.formAttrData);
        this.$emit("save", list, attrs);
      });
    }
  },
  watch: {
    // 监听当前选中表单项的修改内容
    activeConfig: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue) {
          // 表单属性和控件属性都存在 span 即表单栅格，当控件属性的 span 更新时，表单属性也需要同步更新
          // this.formAttrData.span = newValue?.__config__?.span;
        }
      }
    },
    drawingList(newValue) {
      this.$emit("update:formLists", newValue);
      this.$emit("update", this.drawingList, this.formAttrData);
    },
    formAttrData(newValue) {
      this.$emit("update:formAttrs", newValue);
      this.$emit("update", this.drawingList, this.formAttrData);
    }
  }
};
</script>

<style lang="scss">
@import "./styles/index.scss";
@import "./styles/generator.scss";

.form-gener {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  .form-gener-left,
  .form-gener-right {
    background-color: #fff;
    z-index: 1;
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }

  .form-gener-left {
    width: 260px;
    box-shadow: 0 0 8px $shadowColor;
    .form-gener-left-title {
      height: 42px;
      line-height: 42px;
      text-align: center;
      font-size: 14px;
      color: $themeColor;
    }
    .form-gener-left-cont {
      height: calc(100% - 43px);
    }
  }
  .form-gener-content {
    flex: 1;
    position: relative;
    > .toLeft,
    > .toRight {
      display: inline-block;
      box-shadow: 2px 0 12px $shadowColor;
      border-radius: 0 6px 6px 0;
      position: absolute;
      top: 50%;
      transform: translateY(-16px);
      color: #666;
      outline: none;
      height: 32px;
      width: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    > .toLeft {
      left: 0;
      -webkit-transform: perspective(10px) rotateY(9deg);
      transform: perspective(10px) rotateY(9deg);
    }
    > .toRight {
      -webkit-transform: perspective(10px) rotateY(-9deg);
      transform: perspective(10px) rotateY(-9deg);
      right: 0;
    }
    .form-gener-button {
      height: 42px;
      box-shadow: 0 0 8px $shadowColor;
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // // border-bottom: 1px solid $borderColor;
    }
    .form-gener-form {
      padding: 16px;
      height: calc(100% - 43px);
      overflow-y: auto;
      box-sizing: border-box;
      position: relative;
    }
    .form-empty {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .form-gener-right {
    // border-left: 1px solid $borderColor;
    box-shadow: 0 0 8px $shadowColor;
    width: 350px;
    height: 100%;
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__item {
      height: 44px;
    }
    .form-gener-attr-cont {
      height: calc(100% - 44px);
      padding: 16px;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
  .form-gener-side-close {
    width: 0;
  }
}
</style>
